VOS - UC aanmelden - wireframe naar HTML

We baseren ons op een wireframe om de HTML te maken.

De wireframe vind op VOS - wireframes De logica achter de HTML opbouw wordt uiteengezet in tower pattern. Je ziet een werkend voorbeeld van de HTML en de CSS voor deze pagina op mijn Cloud9 workspace met de naam index.html in de map vos.

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="css/vos.css">
    <link type="text/css" rel="stylesheet" href="css/iconfont.css">
    <title>Veilig op school</title>
    <script type="text/javascript" src="js/modern-ajax.js"></script>
    <script type="text/javascript" src="js/vos.js"></script>
    <script>
        window.onload = function() {
            // bij het openen van de website wordt de home-index view getoond
            window.location.href = '#home-index';
        }
    </script>
</head>

<body>
    <div id="tower" class="tower">
        <!-- elke floor komt overeen met één view -->
        <div class="floor" id="home-index">
            <header class="front">
                <nav class="control-panel">
                    <button class="tile" name="uc" value="home/index">
                    <span class="icon-menu2"></span>
                    <span class="screen-reader-text">Home</span>
                </button>
                </nav>
                <h1>veilig<br/><span>op school</span></h1>
            </header>
            <div class="show-room index" id="home">
                </button>
                <button class="tile" name="uc" value="home/login">
                <span class="icon-enter"></span>
                <span class="screen-reader-text">Login</span>
            </button>
                <button class="tile" name="uc" value="fire/index">
                <span class="icon-fire"></span>
                <span class="screen-reader-text">Brand</span>
            </button>
                <button class="tile" name="uc" value="poison/index">
                <span class="icon-skull"></span>
                <span class="screen-reader-text">Gif</span>
            </button>
                <button class="tile" name="uc" value="lighting/index">
                <span class="icon-lightning"></span>
                <span class="screen-reader-text">Bliksem</span>
            </button>
                <button class="tile" name="uc" value="bomb/index">
                <span class="icon-bomb"></span>
                <span class="screen-reader-text">Bliksem</span>
            </button>
                <button class="tile" name="uc" value="aidkit/index">
                <span class="icon-aid-kit"></span>
                <span class="screen-reader-text">Eerste hulp</span>
            </button>
            </div>
        </div>
    </div>
</body>

</html>

2017-01-01 20:06:56